<template>
	<view class="join-investment full box relative bg-primary flex-col">
		<view class="w-wrap">
			<view class="w-inner">
				<scroll-view scroll-y="true" class="full">
					<view class="top-box">
						<view class="top-text">
							<text>方式一: 发送邀请码或者链接，被邀请人自助填写资料支付费用。</text>
						</view>
						<view class="top-btn" @click="handleToInvite">
							<text>立即邀请</text>
						</view>
					</view>
					<view class="form-box">
						<view class="form-text">
							<text>方式二: 由您代为填写注册资料，并且由您收取相关费用后，代付给公司。</text>
						</view>
						<u-form label-width="180rpx" :model="formData" :rules="formRules" ref="formRef">
							<u-form-item label="加盟人姓名:" prop="name">
								<u-input v-model="formData.name" placeholder="请输入加盟人姓名" />
							</u-form-item>
							<u-form-item label="加盟人电话:" prop="mobile">
								<u-input v-model="formData.mobile" placeholder="请输入加盟人电话" />
							</u-form-item>
							<u-form-item label="验证码:" prop="code">
								<u-input type="number" v-model="formData.code" placeholder="请输入验证码" />
								<template #right>
									<view class="get-code-btn">
										<text>{{ codeText }}</text>
									</view>
								</template>
							</u-form-item>
							<u-form-item label="密码:" prop="password">
								<u-input v-model="formData.password" type="password" placeholder="请输入系统登录密码" />
							</u-form-item>
							<u-form-item label="确认密码:" prop="copy_password">
								<u-input v-model="formData.copy_password" type="password" placeholder="再次输入密码" />
							</u-form-item>
							<!-- <u-form-item label="收货地址:" prop="address">
								<u-input v-model="formData.address" placeholder="请选择水管家自用机收货地址" type="select" />
							</u-form-item> -->
							<u-form-item label="收货地址:" prop="shouhuo_address">
								<u-input v-model="formData.shouhuo_address" placeholder="请输入收货地址" />
							</u-form-item>
							<u-form-item label="备注:" prop="content">
								<u-input v-model="formData.content" placeholder="请输入备注" />
							</u-form-item>
						</u-form>
						<view class="confirm-btn" @click="handleConfirm">
							<text>下一步，代缴费用</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-verification-code :seconds="seconds" @end="handleOnCodeEnd" @start="handleOnCodeStart" ref="codeRef"
			@change="handleCodeChange" />
	</view>
</template>

<script>
	import { request, showLoading, toast } from '@/utils/tool';
	export default {
		data() {
			return {
				seconds: 10,
				formData: {
					name: "",
					mobile: "",
					password: "",
					copy_password: "",
					address: "",
					content: "",
					code: "",
					shouhuo_address: ""
				},
				codeText: ""
			}
		},
		onReady() {
			this.$refs.formRef.setRules(this.formRules);
		},
		computed: {
			formRules() {
				return {
					name: [{
						required: true,
						message: '请输入加盟人姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						required: true,
						message: '请输入加盟人电话',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入系统登录密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					copy_password: [{
						required: true,
						message: '请再次输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// address: [{
					// 	required: true,
					// 	message: '请选择水管家自用机收货地址',
					// 	// 可以单个或者同时写两个触发验证方式 
					// 	trigger: ['change', 'blur'],
					// }],
					shouhuo_address: [{
						required: true,
						message: '请输入收货地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		methods: {
			handleToInvite() {
				uni.navigateTo({
					url: "/pages/index/join-investment/poster",
				})
			},
			handleConfirm() {
				this.$refs.formRef.validate(async (valid) => {
					if (!valid) return
					const data = { ...this.formData }
					const hide = showLoading("正在提交")
					const resp = await request({
						url: "/zhaoshang/daitijiao",
						data
					}).finally(hide)
					if (resp.code !== 1) {
						return toast({ title: resp.msg || "提交失败" })
					}
					const payload = resp.data
					uni.navigateTo({
						url: "/pages/pay/index?data=" + JSON.stringify(payload)
					})
				})
			},
			handleCodeChange(text) {
				this.codeText = text;
			},
			handleOnCodeEnd() {
				console.log('end');
			},
			handleOnCodeStart() {
				console.log('start');
			}
		},
	}
</script>

<style lang="scss" scoped>
	.join-investment {
		padding: 28rpx 20rpx 0;
		box-sizing: border-box;

		.form-box {
			margin-top: 24rpx;
			padding: 32rpx 22rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-sizing: border-box;
			position: relative;

			.get-code-btn {
				width: 138rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				font-size: 20rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, #85AAE6 0%, #0967FE 100%);
				border-radius: 23rpx 23rpx 23rpx 23rpx;
			}

			.confirm-btn {
				margin: 44rpx auto 0;
				width: 437rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 36rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, #7FA7E7 0%, #0A67FD 100%);
				border-radius: 38rpx 38rpx 38rpx 38rpx;
			}

			.form-text {
				font-size: 28rpx;
				color: #464655;
				line-height: 40rpx;
			}
		}

		.top-box {
			padding: 34rpx 22rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.top-btn {
				width: 438rpx;
				height: 80rpx;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				margin: 36rpx auto 0;
				background: linear-gradient(90deg, #7FA7E7 0%, #0A67FD 100%);
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				text-align: center;
			}

			.top-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #464655;
				line-height: 40rpx;
				word-break: break-all;
				white-space: pre-wrap;
			}
		}
	}
</style>